<template>
  <div>
    <modal ref="modal_1" title="站内信" top="10%" width="50%" :close-on-click-modal="true">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="收件箱" name="inbox">

          <inbox  @success="refreshOutbox" />
        </el-tab-pane>
        <el-tab-pane label="发件箱" name="outbox">
            <outbox ref="outboxRef" />
        </el-tab-pane>
      </el-tabs>
    </modal>




    <span @click="open">
      <el-badge :value="unreadList.length > 99 ? '99+' : unreadList.length" class="item" v-if="unreadList.length > 0">
        <el-icon>
          <Bell />
        </el-icon>
      </el-badge>
      <el-icon v-else>
        <Bell />
      </el-icon>
    </span>

  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Outbox from "./components/outbox.vue"
import Inbox from "./components/inbox.vue"
import { h } from 'vue'
export default {
  components: {
    Outbox,
      Inbox
  },
  name: "top-notice",
  data() {
    return {
      activeName: 'inbox',
      box: false,
      notifyTime: 3000,
        lastTime: 0,
        flag:0,
        unreadSize:0,

    }
  },
  computed: {
    unreadList() {
      // console.log("this.$store.state.im.imUnreadList",this.$store.state.im.imUnreadList)
      return this.$store.state.im.imUnreadList
    },
  },
  watch: {
    unreadList: {
      handler(val) {
          // console.log("watch",this.$store.state.im.imUnreadList)
        if (val.length >0 && val.length>this.unreadSize) {
          const now = Date.now();
          if (now - this.lastTime > this.notifyTime) {
          this.lastTime = now;
          console.log("h", h);
          let message = "您有新的未读消息";
          if (this.unreadSize > 0) {
              message = val[val.length-1].descName;
          }
          this.$notify.info({
            title: '新消息提醒',
            message: h('i', { style: 'color: teal' }, message),
            offset: 100,
            duration: this.notifyTime,
            onClick: () => {
              this.open()
            }
          });
          this.unreadSize=val.length;

          }
        }
      },
      deep: true, // 深度监听
      immediate: true,//立即执行
    },

  },
  created() {
      // this.$store.dispatch("imConnect");
  },
    mounted() {
      // console.log("mounted",this.$store.state.im.imUnreadList);
    },
  methods: {
      refreshOutbox(){
        this.$refs.outboxRef.refreshChange();
      },
      handleClick(tab, event) {
         console.log(tab);
         console.log(tab.props.name)

      },
      pageChange(page, done) {
      setTimeout(() => {
        this.$message.success('页码' + page)
        this.data = this.data.concat(list);
        done();
      }, 1000)

    },
    open() {
      console.log('55555555555555555555')
      this.$refs.modal_1.show()
    },

  }
};
</script>

<style lang="scss" scoped>
:deep(.el-badge__content.is-fixed) {
  // transform: translateY(-5%) translateX(100%);
  // right: calc(1px + var(--el-badge-size)/ 2);
}
</style>
